<template>
	<view class="picketsList" v-if="receiveInfo">
		<navigator class="nav" open-type="navigateBack">
			<uv-icon name="arrow-left" color="#fff" size="40rpx"></uv-icon>
		</navigator>
		<view class="logo">
			<image :src="$showImg('/images/demo/logo2.png')"></image>
		</view>
		<view class="detail">
			<view class="tit"> 恭喜您获得 </view>
			<view class="num"> {{ receiveInfo.money }}<text>元</text> </view>
			<view class="tip">
				<text>分享得奖励</text>
				<text>转发分享成功，转发链接被点击 奖励自动到账</text>
			</view>
			<button class="btn flex align-center just-center" hover-class="none" open-type="share">立即转发</button>
		</view>
		<view class="list">
			<view class="tit"> 领取榜单 </view>
			<view class="th">
				<text>头像</text>
				<text>昵称</text>
				<text>已领金额</text>
			</view>
			<view class="tr" v-for="item in list" :key="item.id">
				<view class="avatar">
					<image :src="$getImageURL(item.user.avatar)"></image>
				</view>
				<view class="name">
					<text>{{ item.user.nickname }}</text>
				</view>
				<view class="money">
					<text>{{ item.money }}元</text>
				</view>
			</view>
		</view>
		<view class="getPickets" v-if="receiveInfo.type == 0 && isShow">
			<view class="pkg">
				<image src="http://www.zhuox.net/images/demo/tchuang.png"></image>
				<view class="detail1">
					<view class="tit"> 恭喜您获得 </view>
					<view class="num"> {{ receiveInfo.money }}<text>元</text> </view>
					<view class="tip">
						<text>转发成功得红包</text>
					</view>
					<view class="btn" @click="isShow = false"> 开心收下 </view>
				</view>
				<view class="close" @click="isShow = false">
					<image src="http://www.zhuox.net/images/demo/gb1.png" />
				</view>
			</view>
		</view>
		<view class="coupon" v-if="receiveInfo.type == 1">
			<view class="contain">
				<image src=" http://www.zhuox.net/images/demo/quanbg.png" />
				<view class="detail2">
					<view class="tit"> 恭喜获得 </view>
					<view class="num">
						<text>优惠券一张</text>
					</view>
					<view class="tip">
						<text>-收下并转发可继续领取优惠券-</text>
					</view>
					<view class="btn">
						<view class="b1" @click="isShow = false"> 开心收下 </view>
						<view class="b2" @click="useCoupon"> 去使用 </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GetBonusLogList, GetArticleDetail } from "@/API/article.js";

	export default {
		data() {
			return {
				receiveInfo: null, //领取的信息
				dataInfo: null, //数据

				isShow: true, //显示弹窗
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			if (options.obj) {
				const obj = JSON.parse(options.obj);
				this.receiveInfo = obj;
			}
			this.getArticleDetails();
			this.onRefresh();
		},
		/**
		 * 分享好友
		 */
		onShareAppMessage() {
			const obj = this.$filters.getShareInfo(this.dataInfo);
			return {
				title: obj.title,
				imageUrl: obj.shareImg,
				path: `/pages/home/article/details?id=${this.receiveInfo.article_id}&from=share&super_id=${
					this.$stoarge.getUserInfo().id
				}`,
			};
		},
		/**
		 * 分享朋友圈
		 */
		onShareTimeline() {
			const obj = this.$filters.getShareInfo(this.dataInfo);
			return {
				title: obj.title,
				imageUrl: obj.shareImg,
				query: `obj=${JSON.stringify(this.receiveInfo)}`,
			};
		},
		//加载更多
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getListData();
			}
		},
		methods: {
			/**
			 * 登录成功刷新接口
			 */
			onLoginRefreshData() {
				this.getArticleDetails();
				this.onRefresh();
			},
			/**
			 * 去只用
			 */
			useCoupon() {
				this.$jump.onStoreIndex(this.receiveInfo.shop_id);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getListData();
			},
			/**
			 * 网络请求
			 */
			getListData() {
				GetBonusLogList(this.page, this.receiveInfo.article_id).then((res) => {
					this.total = res.data.list.total;
					const list = res.data.list.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			/**
			 * 获取详情
			 */
			getArticleDetails() {
				GetArticleDetail(this.receiveInfo.article_id).then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.picketsList {
		padding: 120rpx 20rpx 20rpx;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		background: #d91100 url(http://www.zhuox.net/images/demo/hbbg.png) no-repeat;
		background-size: 100% auto;

		.logo {
			margin-top: 40rpx;
			text-align: center;

			image {
				width: 290rpx;
				height: 80rpx;
			}
		}

		.detail {
			width: 380rpx;
			margin: 70rpx auto;
			text-align: center;

			.tit {
				margin-top: 10rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #ffffff;
			}

			.num {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 81rpx;
				color: #feffb3;
				text-shadow: 0rpx 3rpx 7rpx rgba(183, 0, 23, 0.65);

				text {
					font-size: 78rpx;
					position: relative;
					top: -3rpx;
				}
			}

			.tip {
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
				margin-top: 70rpx;

				text {
					display: block;
					margin-top: 10rpx;
					font-weight: bold;
				}

				text:nth-child(1) {
					font-size: 36rpx;
					color: #feffb3;
					text-shadow: 0rpx 3rpx 7rpx rgba(183, 0, 23, 0.65);
				}

				text:nth-child(2) {
					font-size: 26rpx;
					color: #feffb3;
					line-height: 36rpx;
					text-shadow: 0rpx 3rpx 7rpx rgba(183, 0, 23, 0.65);
				}
			}

			.btn {
				width: 362rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				background: url(http://www.zhuox.net/images/demo/an.png) no-repeat;
				background-size: 100% 100%;
				font-weight: bold;
				font-size: 36rpx;
				color: #e02b10;
				margin: 30rpx auto;
				padding: 0rpx !important;
			}
		}

		.list {
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			margin-top: 60rpx;
			background: #ffffff;
			border-radius: 20rpx;
			// overflow: hidden;
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			&::after {
				content: "";
				position: absolute;
				width: 96%;
				height: 50rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx -18rpx 0rpx 0rpx rgba(255, 255, 255, 0.3);
				left: 50%;
				transform: translateX(-50%);
				top: 0rpx;
			}

			.tit {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				padding: 20rpx 0;
				text-align: center;
			}

			.th {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;

				// text:nth-child(1) {
				// 	flex-basis:60rpx;
				// 	flex-shrink: 0;
				// 	text-align: center;
				// }
				// text:not(:nth-child(1)) {
				// 	flex:1;
				// 	text-align: center;
				// }
				text {
					flex: 1;
					text-align: center;
				}
			}

			.tr {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				height: 100rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				background: #feeaec;
				border-radius: 20rpx;

				view {
					flex: 1;
					text-align: center;
				}

				.avatar {
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin: 0 auto;
					}
				}

				.money {
					font-weight: bold;
					font-size: 28rpx;
					color: #df230f;
				}
			}
		}

		.getPickets {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;

			.pkg {
				width: 750rpx;
				height: 750rpx;
				position: relative;

				.close {
					position: absolute;
					bottom: -126rpx;
					left: 50%;
					transform: translateX(-50%);

					image {
						width: 52rpx;
						height: 120rpx;
					}
				}

				.detail1 {
					text-align: center;
					position: absolute;
					top: 370rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 9999;

					.tit {
						font-size: 36rpx;
						font-weight: 500;
						color: #ffffff;
					}

					.num {
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 81rpx;
						color: #feffb3;
						text-shadow: 0rpx 3rpx 7rpx rgba(183, 0, 23, 0.65);

						text {
							font-size: 78rpx;
							position: relative;
							top: -3rpx;
						}
					}

					.tip {
						font-size: 26rpx;
						font-weight: 400;
						color: #ffffff;
						margin-top: 20rpx;

						text {
							display: block;
							margin-top: 10rpx;
							font-weight: bold;
							font-size: 26rpx;
							color: #feffb3;
						}
					}

					.btn {
						width: 362rpx;
						height: 86rpx;
						line-height: 86rpx;
						text-align: center;
						background: url(http://www.zhuox.net/images/demo/an.png) no-repeat;
						background-size: 362rpx 86rpx;
						font-weight: bold;
						font-size: 36rpx;
						color: #e02b10;
						margin: 30rpx auto;
					}
				}

				image {
					width: 750rpx;
					height: 750rpx;
				}
			}
		}

		.coupon {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;

			.contain {
				width: 750rpx;
				height: 545rpx;
				position: relative;

				.detail2 {
					text-align: center;
					position: absolute;
					top: 0rpx;
					left: 50%;
					transform: translateX(-50%);
					z-index: 9999;
					width: 100%;

					.tit {
						font-size: 32rpx;
						color: #d81310;
					}

					.num {
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 60rpx;
						color: #d91f1a;
						text-shadow: 0rpx 3rpx 7rpx rgba(255, 245, 202, 0.65);
						margin-top: 50rpx;
					}

					.tip {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #fda74f;
					}

					.btn {
						display: flex;
						justify-content: center;
						gap: 20rpx;
						margin-top: 190rpx;

						.b1,
						.b2 {
							width: 220rpx;
							height: 96rpx;
							display: flex;
							justify-content: center;
							line-height: 90rpx;
							background: url(http://www.zhuox.net/images/demo/an3.png) no-repeat;
							background-size: 220rpx 96rpx;
							font-weight: bold;
							font-size: 26rpx;
							color: #e02b10;
						}
					}
				}
			}

			image {
				width: 750rpx;
				height: 545rpx;
			}
		}
	}
</style>
